<template>
  <div class="movieTitle">座位管理</div>
  <el-table :data="pageData.seatList.slice((pageData.current-1)*pageData.pagesize,pageData.current*pageData.pagesize)" style="width: 100%">
     <el-table-column label="序号" width="150" > <template  #default="scope"><span>{{(pageData.current - 1) * pageData.pagesize + scope.$index + 1}}</span></template></el-table-column> 
    <el-table-column prop="id" label="ID" width="150" />
    <el-table-column prop="cname" label="影院" width="200" />
    <el-table-column prop="chinese_name" label="影片名称" width="220" show-overflow-tooltip/>
    <el-table-column prop="r_name" label="影厅" width="200"  show-overflow-tooltip/>
    <el-table-column prop="time" label="时间段" width="200" show-overflow-tooltip/>
    <el-table-column prop="seat" label="座位号" width="200" />
    <el-table-column label="状态" width="200" >
        <template v-slot="scope">
      <span v-if="scope.row.flag==2">已预订</span>
      <span v-else-if="scope.row.flag==0">未售</span>
      <span v-else>已售出</span>
    </template>
    </el-table-column>
    <el-table-column fixed="right" width="110">
      <template #header>
        <el-button size="small" @click="handleRef()"
          ><el-icon><refresh /></el-icon
        ></el-button>
      </template>
      <template #default="scope">
        <el-button
          type="success"
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
          ><el-icon><edit /></el-icon
        ></el-button>
        <el-button
          type="danger"
          size="small"
          @click="handleDelete(scope.$index, scope.row)"
          ><el-icon><delete /></el-icon
        ></el-button>
      </template>
    </el-table-column>
  </el-table>


  <!--修改电影面版 -->
  <!-- <el-dialog
    v-model="dialogFormcinemaUpdateVisible"
    title="编辑影院"
  >
    <el-form :model="updatecinemadialogData">
        <el-form-item label="影院ID" class="elstyle" label-width="100px" >
        <el-input disabled v-model="updatecinemadialogData.cid"/>
      </el-form-item>
       <el-form-item label="影院名称" class="elstyle" label-width="100px" >
        <el-input v-model="updatecinemadialogData.cname"/>
      </el-form-item>
      <el-form-item label="影院地址" class="elstyle" label-width="100px">
        <el-input   v-model="updatecinemadialogData.address"/>
      </el-form-item>
      <el-form-item label="联系方式" class="elstyle" label-width="100px">
        <el-input   v-model="updatecinemadialogData.phone"/>
      </el-form-item>
       <el-form-item label="影院所在地" class="elstyle" label-width="100px">
        <el-input   v-model="updatecinemadialogData.city"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormcinemaUpdateVisible = false">取消</el-button>
        <el-button type="primary" @click="updateCinemaInfo">保存</el-button>
      </span>
    </template>
  </el-dialog> -->


    <!--分页 -->
    <el-pagination
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange"
    :current-page="pageData.current"
    layout="prev, pager, next,total,jumper"
    :total="pageData.total"
    :page-size="pageData.pagesize"
  />
</template>

<script lang="ts">
import { Delete, Refresh, Edit, Plus } from "@element-plus/icons-vue";
import { computed, onMounted, reactive, ref, inject, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
export default {
  components: { Delete, Refresh, Edit, Plus },
  setup() {
    interface Cinema {
    cid?:number;
    cname:string;
    address:string;
    phone:string;
    city:string;
    }
    const store=useStore();
     const reload=inject("reload",() => {})
    onMounted(() => {
      handleRefs();
    });
    
    let dialogFormcinemaUpdateVisible=ref(false);
    const updatecinemadialogData=reactive({
      cid:1,
      cname:"",
      address:"",
      phone:"",
      city:""
    })
    const handleClick = () => {
      console.log("click");
    };
             /**分页 */
    const pageData=reactive({
       current:1,//当前页
       pagesize:5,// 当前页显示多少条
       seatList:ref([]),
       total:0  //总数据
     })
     const arr =ref([])
     const temp =ref([])
     pageData.seatList=computed({
      get:()=>{ return temp.value},
      set:(newvalue)=>{ temp.value=newvalue}
    }) as never
    /**界面刷新 */
    const handleRefs = async () => {
      store.dispatch("SET_ALLSEAT").then(()=>{
        arr.value=store.state.seat.allseatInfo;
        temp.value=arr.value
        pageData.total = computed(()=>{return store.state.seat.allseatInfo.length}) as never;
      })
    };
    const updateCinemaInfo=async()=>{

    }
    const handleRef = async () => {
        reload();
    };
    const addCinemaInfo=async ()=>{

    }
    const handleEdit = (index: number, row: Cinema) => {
    //   dialogFormcinemaUpdateVisible.value=true;
    //   let key: keyof Cinema;
    //   for (key in row) {
    //     updatecinemadialogData[key] = row[key] as never;
    //   }
    };
    const handleDelete =async (index: number, row: any) => {
      console.log(row);
      
        store.dispatch("SET_DELETESEAT",{id:row.id}).then(()=>{
          ElMessage.success("删除成功!")
        });
        reload();
    };
    const handleSizeChange=(value:any)=>{
      pageData.pagesize=value;
      pageData.seatList=[];
      handleRefs();

    }   
    const handleCurrentChange=(value:any)=>{
      pageData.current=value;
      pageData.seatList=[];
      handleRefs();
    }

    return {
      handleSizeChange,
      handleCurrentChange,
      Delete,
      Edit,
      handleClick,
      handleRefs,
      handleRef,
      handleEdit,
      handleDelete,
      pageData,
      updatecinemadialogData,
      dialogFormcinemaUpdateVisible,
      addCinemaInfo,
      updateCinemaInfo
    };
  },
};
</script>
<style scoped>
.movieTitle {
  font-size: 1.5rem;
  margin: 20px 0 10px 0;
}
.introduction{
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;        
}
.el-table .cell {
  padding: 5px 12px;
}
.el-pagination{
  padding: 50px 10px;
  margin-left: 35rem;
}
</style>
